<template>
  <NSpace vertical :size="16">
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:5">
        <NCard :bordered="false" class="card-wrapper" content-style="padding:1rem;"
               style="box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);">
          <n-grid :x-gap="12" :y-gap="8" :cols="1">
            <n-grid-item>
              <n-card :bordered="false" content-style="padding:0;height:150px">
                <template #default>
                  <div class="company-name"> xxx有限公司</div>
                </template>
              </n-card>
            </n-grid-item>
            <n-grid-item>
              <n-card :bordered="false" content-style="padding:0;">
                <strong style="line-height: 1.5rem">
                  <icon-material-symbols-location-on class="text-xl"/>
                  所在地区</strong>
                <p class="text-muted">
                  中国，北京市
                </p>
                <hr>
              </n-card>
            </n-grid-item>
            <n-grid-item>
              <n-card :bordered="false" content-style="padding:0;">
                <strong>
                  <icon-material-symbols-mail-rounded class="text-xl"/>
                  邮箱地址</strong>
                <p class="text-muted">
                  904853262@qq.com
                </p>
                <hr>
              </n-card>
            </n-grid-item>
            <n-grid-item>
              <n-card :bordered="false" content-style="padding:0;">
                <strong>
                  <icon-material-symbols-phone-in-talk-rounded class="text-xl"/>
                  联系电话</strong>
                <p class="text-muted">
                  17601607652
                </p>
                <hr>
              </n-card>
            </n-grid-item>
          </n-grid>
        </NCard>
      </NGi>
      <NGi span="24 s:24 m:19">
        <NCard :bordered="false" class="card-wrapper" content-style="padding: 0 .5rem .5rem !important;"
               style="box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);">
          <n-tabs type="line" animated>
            <n-tab-pane name="userList" tab="成员信息">
              <template #default>
                <TenantUserList/>
              </template>
            </n-tab-pane>
            <n-tab-pane name="roleList" tab="角色信息">
              <template #default>
                角色信息
              </template>
            </n-tab-pane>
            <n-tab-pane name="dataList" tab="数据看板">
              <TenantDataboard/>
            </n-tab-pane>
          </n-tabs>
        </NCard>
      </NGi>
    </NGrid>
  </NSpace>
</template>
<script setup lang="tsx">
import {computed, watch} from "vue";
import {useAppStore} from "@/store/modules/app";
import TenantDataboard from "@/views/tenant/tenant-databoard.vue";
import TenantUserList from "@/views/tenant/tenant-user-list.vue";

const appStore = useAppStore();
defineOptions({name: 'TenantInfo'})
const gap = computed(() => (appStore.isMobile ? 0 : 8));
const props = defineProps<{
  id: number
}>();

watch(props, () => {
});

</script>
<style scoped>
.n-gradient-text {
  font-size: 24px;
}

strong {
  font-weight: bolder;
}

.text-muted {
  margin-bottom: 1rem;
  color: #6c757d !important;
  padding-left: 2px;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.company-name {
  height: 90px;
  text-align: left !important;
  font-size: 21px;
  margin-top: 5px;
  color: #000000;
}

:deep(.n-tabs-tab--active) {
  font-weight: 700 !important;
}

:deep(.card-wrapper) {
  border-radius: 3px !important;
}
</style>
